<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- v-if一开始数组的长度大于1才显示该组件，目的：是为了阻止页面一开始就发请求，等数组里面有数据了，才能开始发请求 -->
      <!-- v-if="user_content.length > 1" -->
      <van-nav-bar
        title="评论列表"
        left-text="返回"
        left-arrow
        :fixed="true"
        @click-left="$router.go(-1)"
      />

      <hmcommentList>
        <template #text>
          <textarea
            placeholder="请输入内容"
            v-model="content"
            ref="myfocus"
          ></textarea>
        </template>

        <template #publish>
          <van-button type="info" class="wid" @click="publish">发表</van-button>
        </template>

        <template #content_list>
          <li v-for="value in user_content" :key="value.id">
            <p class="content">{{ value.content }}</p>
            <div class="name">
              <span>{{ value.user_name }}</span>
              <span>{{ value.add_time | mydate("-") }}</span>
            </div>
          </li>
        </template>
      </hmcommentList>
    </van-list>
  </div>
</template>

<script>
import hmcommentList from "@/components/hmcommentList";
import { shoppingGetcomments, shoppingPostcommen } from "@/apis/get";
import { mydate } from "@/apis/dataFilter";
export default {
  components: {
    hmcommentList,
  },
  data() {
    return {
      user_content: [],
      content: "",
      pageindex: 1,
      loading: false,
      finished: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    onLoad() {
      //定时器需要删除，只是为了看效果
      setTimeout(() => {
        this.pageindex++;
        this.init();
      }, 2000);
    },
    publish() {
      if (this.content.length == 0) return this.$toast.fail("评论不能为空");
      shoppingPostcommen(this.$route.params.id, this.content).then((res) => {
        if (res.data.message === "评论提交成功") {
          this.$toast.success(res.data.message);
          this.init_comtent();
          this.content = "";
          this.$refs.myfocus.focus();
        }
      });
    },
    init() {
      shoppingGetcomments(this.$route.params.id, {
        pageindex: this.pageindex,
      }).then((res) => {
        this.user_content = [...this.user_content, ...res.data.message];
        this.loading = false;
        if (res.data.message.length < 10) {
          this.finished = true;
        }
      });
    },
    //因为上面那个函数是把添加的数据加到数组的后面的，所以添加成功之后，需要调用这个方法，最加到第一页，用户提交成功后需要调用这个函数，不能调用上面那个函数
    //这里的1必须固定写死，每次评论数据加到第一页
    init_comtent() {
      shoppingGetcomments(this.$route.params.id, {
        pageindex: 1,
      }).then((res) => {
        this.user_content = res.data.message;
      });
    },
  },
  filters: {
    mydate,
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-list__loading {
  margin-top: -80px;
  margin-bottom: 40px;
}
/deep/ .van-list__finished-text {
  margin-top: -80px;
  margin-bottom: 40px;
}
/deep/ .van-nav-bar__content {
  background-color: #26a2ff;

  .van-nav-bar__text,
  .van-icon {
    color: #fff;
  }
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
</style>